<template>
    <el-drawer v-model="drawerVisible" title="点播预告详情" direction="rtl" size="80%" :with-header="true"
        style="background: #F7F7F7;">
        <div class="main">
            <div class="video">
                <video ref="videoRef" src="../assets/123.mp4" autoplay="false" controls="true" @ended="onEnded"
                    @loadeddata="onLoadedData" @error="onError"></video>
            </div>
            <div class="basic-msg">
                <div>预告基本信息</div>
                <div class="con">
                    <div class="square">
                        <div class="label">直播标题</div>
                        <div class="content">17837485968</div>
                    </div>
                </div>
                <div class="con">
                    <div class="square">
                        <div class="label">直播封面</div>
                        <div class="content"><img
                                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="con">
                    <div class="square">
                        <div class="label">直播时间</div>
                        <div class="content">2025-08-02 07:06</div>
                    </div>
                </div>
                <div class="con">
                    <div class="square">
                        <div class="label">直播介绍</div>
                        <div class="content">lllll</div>
                    </div>
                </div>
                <div class="con">
                    <div class="square">
                        <div class="label">直播类型</div>
                        <div class="content">直播</div>
                    </div>
                </div>
                <div class="con">
                    <div class="square">
                        <div class="label">视频方向</div>
                        <div class="content">17837485968</div>
                    </div>
                </div>
                <div class="con">
                    <div style="justify-content: flex-end;display: flex;">
                        <el-button type="danger" size="small" @click="handleAudit(2)">驳回</el-button>
                        <el-button type="primary" size="small" @click="handleAudit(1)">通过</el-button>

                    </div>
                </div>
            </div>
        </div>

        <div class="list">
            <div class="header-one">
                <div>商品列表</div>
                <el-input v-model="keyword" placeholder="请输入关键词" clearable style="width: 200px;height: 30px"></el-input>
            </div>
            <!-- 数据表格 -->
            <div class="table-container">
                <el-table :data="paginatedData" style="width: 100%;" border stripe
                    :header-cell-style="{ background: '#f5f7fa' }">
                    <!-- 表格列定义保持不变 -->
                    <el-table-column label="商品图片" width="160">
                        <template #default="scope">
                            <el-avatar :src="scope.row.photo" size="small" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="商品名称" min-width="120" />
                    <el-table-column prop="jiage" label="商品价格" min-width="120" />
                </el-table>

                <!-- 分页 -->
                <div class="pagination-container">
                    <el-pagination v-model:currentPage="pagination.currentPage" v-model:page-size="pagination.pageSize"
                        :total="filteredTableData.length" :page-sizes="[10, 20, 50, 100]"
                        layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" background="true" />
                </div>
            </div>
        </div>
    </el-drawer>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed, reactive, defineProps, defineEmits, watch } from 'vue'
import { reject } from '../api/live'
import { ElMessage, ElMessageBox } from 'element-plus'
const keyword = reactive();

// 定义props接收父组件传递的数据
const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    rowData: {
        type: Object,
        default: () => ({})
    }
})

// 定义emit用于通知父组件drawer状态变化
const emit = defineEmits(['update:visible', 'audit-success'])

// 抽屉可见性状态
const drawerVisible = ref(props.visible)

// 监听父组件传入的visible变化
watch(() => props.visible, (newVal) => {
    drawerVisible.value = newVal
})

// 监听drawerVisible变化并通知父组件
watch(drawerVisible, (newVal) => {
    emit('update:visible', newVal)
})

// 原始表格数据
const rawData = ref([
    {
        photo: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        name: '消肿止痛酊(花红)',
        jiage: '￥29.90'
    }
]);

// 审核
async function handleAudit(status) {
    let banReason = ''
    if (status === 2) {
        try {
            const { value } = await ElMessageBox.prompt(
                '请输入驳回原因',
                '驳回',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /\S+/,
                    inputErrorMessage: '驳回原因不能为空'
                }
            )
            banReason = value.trim()
        } catch {
            return
        }
    }

    try {
        const res = await reject({
            livestreamId: props.rowData.id,
            status,
            banReason        // 通过时为空字符串
        })
        if (res.success) {
            ElMessage.success(status === 1 ? '已通过' : '已驳回')
            emit('audit-success', { id: props.rowData.id, status: status === 1 ? '1' : '2' })
            drawerVisible.value = false
        } else {
            ElMessage.error(res.msg || '操作失败')
        }
    } catch (e) {
        ElMessage.error('网络异常')
    }
}
// 过滤后的表格数据(计算属性)
const filteredTableData = computed(() => {
    return rawData.value
    // return rawData.value.filter(item => {

    // });
});

// 分页配置
const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 50
});

// 分页配置
const paginatedData = computed(() => {
    const start = (pagination.currentPage - 1) * pagination.pageSize;
    const end = start + pagination.pageSize;
    return filteredTableData.value.slice(start, end);
});

// 分页大小变化
const handleSizeChange = (size) => {
    pagination.pageSize = size;
    console.log('每页条数变化:', size);
    // 调用API获取对应条数的数据
};

// 当前页变化
const handleCurrentChange = (page) => {
    pagination.currentPage = page;
    console.log('当前页变化:', page);
    // 调用API获取对应页的数据
};

// 监听视频加载完成
const onLoadedData = () => {
    console.log("视频加载完成");
};

// 监听视频播放结束
const onEnded = () => {
    console.log("视频播放结束");
};

// 监听视频加载错误
const onError = () => {
    console.error("视频加载失败");
};

</script>

<style scoped lang="scss">
.list {
    height: auto;
    background: #FFFFFF;
    border-radius: 10px;
    margin-top: 20px;

    padding: 20px;

    .header-one {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;

    }
}

.main {
    display: flex;
    justify-content: space-between;

    .video {
        width: 45%;
        height: 490px;
        margin-top: -20px;
    }

    video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .basic-msg {
        width: 50%;
        height: auto;
        background: #FFFFFF;
        border-radius: 10px;
        margin-top: -20px;
        padding: 20px;

        .con {
            margin-top: 20px;

            .square {
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #EEEEEE;
                padding-bottom: 10px;

                .label {
                    font-weight: 500;
                    font-size: 14px;
                    color: #333333;
                    font-family: PingFang SC, PingFang SC;
                }

                .content {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    color: #79879E;

                    img {
                        width: 50px;
                        height: 50px;
                    }
                }
            }
        }
    }

}



.pagination-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 20px;
}

.custom-pagination {
    --el-pagination-hover-bg-color: #f5f7fa;
    --el-pagination-bg-color: transparent;
    --el-pagination-text-color: #606266;
    --el-pagination-button-disabled-bg-color: #f5f7fa;
    --el-pagination-button-disabled-text-color: #c0c4cc;
}

.pagination-pages {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.pagination-btn {
    min-width: 32px;
    height: 32px;
    padding: 0;
    margin: 0 4px;
    background-color: transparent;
    border: 1px solid #dcdfe6;
    color: #606266;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-btn:hover {
    color: #409eff;
}

.pagination-btn.active {
    background-color: #409eff;
    color: #fff;
    border-color: #409eff;
}

.pagination-btn.disabled {
    color: #c0c4cc;
    cursor: not-allowed;
}
</style>